<template>
  <div class="detail">
    <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
    <div class="detail_count">
      <img
        :src="`http://106.15.179.105:3000/${detailObj.product_picture}`"
        alt=""
      />
      <p>{{ detailObj.product_name }}{{ detailObj.product_title }}</p>
      <p class="dl_ct-tw">{{ detailObj.product_intro }}</p>
      <section>
        <span style="color: red; font-size: 14px"
          >￥{{ detailObj.product_selling_price }}
          <s style="font-size: 12px; color: #000"
            >￥{{ detailObj.product_price }}</s
          ></span
        >
        <span>邮费：包邮</span>
        <span>已售：{{ detailObj.product_num }}</span>
      </section>
    </div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服"/>
    <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
    <van-action-bar-icon icon="shop-o" text="店铺"/>
    <van-action-bar-button
      type="danger"
      text="加入购物车"
      @click="onClickButton"
    />
  </van-action-bar>
</template>

<script>
import { Toast } from 'vant';
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import api from "../api/index";
import { useStore } from 'vuex';
export default {
  setup() {
    const route = useRoute();
    const store = useStore();
    let id = route.params.id;
    const data = reactive({
      detailObj: {},
    });
    api.post("/product/getDetails", { productID: id }).then((res) => {
      data.detailObj = res.Product[0];
    });
    const onClickButton = () => { // 加入购物车的函数
       let obj = {
           ...data.detailObj,
           ...{buyNum:1,ischeck:false}
       }
       store.commit('addCart',obj);
       Toast('加入购物车成功');
    }
    return {
      ...toRefs(data),
      onClickButton
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
}
.detail_count {
  height: calc(100% - 46px);
  font-size: 14px;
  padding: 0 10px;
  img {
    width: 100%;
  }
  .dl_ct-tw {
    font-size: 12px;
    color: #999;
    margin: 10px auto;
  }
  section {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
  }
}
</style>